import {
  Button,
  Card,
  Divider,
  Form,
  Image,
  Input,
  message,
  Typography
} from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import ring from '../assets/img/login.png'
import { adminInfoAPI, loginAPI } from '../service/auth'
import { setStorage, setToken } from '../utils/tools'

export default function Home() {
  const navigate = useNavigate()
  const doLogin = async (values) => {
    const res = await loginAPI(values)
    console.log(res)
    if (res.code === '0') {
      // 登录成功
      setToken(res.data.jwt)
      // 获取管理员信息
      const info = await adminInfoAPI()
      console.log(info)
      // 存储管理员角色 0-平台  1-商家
      setStorage('accountType', info.data.accountType)
      // 存储管理员名称
      setStorage('nickname', info.data.nickname)
      // 保存用户id
      setStorage('userId', info.data.id)
      message.success('登录成功')
      navigate('/admin')
    } else {
      message.error('登录失败')
    }
  }

  return (
    <div className="page" style={{ paddingTop: 250 }}>
      <div className="login-logo">
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng144deb7c253bae15f4cee1b871a72070b2fc6159c42d8b46ec3a35a918c033c5"
        />
        <img
          class="image_3"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngea8eefd7d91f66de0cc290db2ab59637927cb606305fe9ba885befdb664ead7a"
        />
        <span class="text_8">LBS智慧营销管理系统</span>
      </div>
      {/* 卡片 */}
      <Card
        style={{
          width: 600,
          margin: '0 auto'
        }}
      >
        <div style={{ display: 'flex' }}>
          {/* 左侧：图片 */}
          {/* preview={false} 关闭预览 */}
          <Image width={200} src={ring} preview={false} />
          {/* 中间：分割线 */}
          <Divider type="vertical" style={{ height: 220 }} />
          {/* 右侧：表单 */}
          {/* labelCol  左侧标签文字占的列数 
            wrapperCol  右侧包裹的输入区域占的列数
          */}
          <Form
            // 监听提交成功
            onFinish={doLogin}
            style={{ flex: 1, paddingLeft: 15, paddingTop: 15 }}
            // labelCol={{
            //   span: 6
            // }}
            wrapperCol={{
              span: 24
            }}
          >
            {/* 表单项 */}
            <Form.Item>
              <Typography.Title level={4} style={{ textAlign: 'center' }}>
                欢迎登录LBS管理系统
              </Typography.Title>
            </Form.Item>
            <Form.Item
              name="phone"
              // 表单验证，required不能为空，message提示消息
              rules={[{ required: true, message: '用户名不能为空' }]}
              // 设置初始值
              initialValue="19941253145"
            >
              <Input
                placeholder="请输入管理员用户名"
                prefix={<UserOutlined />}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '密码不能为空' }]}
              initialValue="123456"
            >
              <Input.Password
                placeholder="请输入密码"
                prefix={<LockOutlined />}
              />
            </Form.Item>
            {/* offset 偏移量，左侧留出的空间 */}

            <Form.Item>
              {/* htmlType 设置为提交按钮，否则没有提交功能
                block 设置为100%
              */}
              <Button type="primary" block htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </Card>
    </div>
  )
}
